<template>
	<view class="">
		<uni-nav-bar title="补液" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
		<view class="infusionList">
			<view><text>出液机</text><text>{{fillingAll.code}}</text></view>
			<view><text>溶液存量</text><text>{{fillingAll.fill_account}}公斤</text></view>
			<view><text>本次最大出液量</text><text>{{fillingAll.max}}公斤</text></view>
		</view>
		<view class="infusion">
			<view class="list">
				<text>受液机</text>
				<view class="lists" v-if="fillCode.length<2">{{receiverfilling.code?receiverfilling.code:'暂无受液机'}}</view>
				<view class="lists" v-else>
					<hpy-form-select
					  :dataList="fillCode"
					  :value="'1'"
					  text="code"
					  name="value"
					  @change="liquid"
					  :title="code"
					  :Text="receiverfilling.code"
					/>
					<uni-icons type="bottom" size="20" color="#666"></uni-icons>
				</view>
			</view>
		</view>
		<view class="testerCenter">
		    <text>加注量</text>
		    <hpy-form-select
		      :dataList="solutionList"
		      :value="'1'"
		      text="text"
		      name="value"
		      @change="consolu"
		      :title="Filling"
		      :Text="Filling"
		    />
		  <view class="" style="justify-content: flex-end">
		    <text>公斤</text>
		  </view>
		</view>
		<view class="submit" @click="submit('1')">提交</view>
		<view class="submit" style="background:rgba(27,145,255,0.2); color: #1b91ff" @click="submit('2')">
		  查看记录
		</view>
	</view>
</template>

<script setup lang="ts">
import { navBack } from '@/utils/navigator';
import { Ref, ref } from 'vue';
import { showLoading, errorToast, successToast } from '@/utils/prompt';
import { toPublish } from '@mqtt';
import { onShow } from '@dcloudio/uni-app';
import { fillings, fillingList } from '@/gql/Infusion';
import { getDriverID } from '@/stores/driverID';
const driver_id = getDriverID();
const Filling = ref(50); //加注量
const solutionList = [50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 800, 1000, 1500, 2000]; // 加注量
const fillingAll: Ref<any> = ref({}); //加注机详情
const fillCode = ref([]); //受液机列表
const receiverfilling: Ref<any> = ref({}); //受液机信息
const fill_id = Number(uni.getStorageSync('fillingID'));
const repeat = ref(true); //放重复点击
//加注量
function consolu(e) {
  Filling.value = e.data;
}
onShow(() => {
  receiver();
});
//获取受液机列表
function receiver() {
  const payload = {
    query: fillingList,
    variables: {
      driver_id,
    },
  };
  toPublish('ql/fill/getFillListByCan', payload, (obj: any) => {
    uni.hideLoading();
    const { data } = obj;
    fillCode.value = data.fill_list_by_can;
    receiverfilling.value = data.fill_list_by_can[0];
  });
}
/**
 * 获取加注机详情
 */
fillLists();
function fillLists() {
  showLoading('加载中');
  const payload = {
    query: fillings,
    variables: {
      fill_id,
    },
  };
  toPublish('ql/fill/getFillInfo', payload, (obj: any) => {
    uni.hideLoading();
    const { test_fill_info } = obj.data;
    fillingAll.value = test_fill_info;
  });
}
/**
 * @param {Object} e 当前选中受液机信息
 */
function liquid(e) {
  receiverfilling.value = e.data;
}
/**
 * @param {Object} num 1 提交授液订单 2查看订单列表
 */
function submit(num) {
  switch (num) {
    case '1':
      if (!receiverfilling.value.id) {
        errorToast('暂无您的受液机');
        return;
      }
      showLoading('正在加载');
      if (!repeat.value) {
        return;
      }
      repeat.value = false;
      const payload = {
        driver_id,
        amount: Filling.value,
        to_fill_id: receiverfilling.value.id,
        fill_id,
      };
      toPublish('order_test/addFillOrder', payload, (obj: any) => {
        uni.hideLoading();
        const { code, msg, data } = obj;
        if (code === 1) {
          successToast(msg);
          setTimeout(() => {
			   repeat.value = true;
            uni.navigateTo({
              url: '/pages/Infusion/InfusionOrder?id=' + data.order_id,
            });}, 1000);
        } else {
          repeat.value = true;
          errorToast(msg);
          return;
        }
      });
      break;
    case '2':
      uni.navigateTo({
        url: '/pages/Infusion/InfusionRecord',
      });
      break;
  }
}
</script>

<style scoped lang="less">
.infusion {
  width: 96%;
  margin: 15rpx auto;
  border-radius: 5px;
  background-color: white;
  padding: 0px 20rpx;
  box-sizing: border-box;
  .list {
    width: 100%;
    padding: 30rpx 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text {
      font-size: 16px;
      font-weight: 400;
      color: #333333;
    }
    .lists {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
.infusionList {
  width: 96%;
  margin: 15rpx auto;
  border-radius: 5px;
  background-color: white;
  padding: 0px 20rpx;
  box-sizing: border-box;
  view:nth-last-child(1) {
    border-bottom: 0px;
  }
  view {
    width: 100%;
    padding: 30rpx 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    text {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
    }
  }
}
.testerCenter {
  width: 96%;
  margin: 15rpx auto;
  background-color: white;
  border-radius: 5px;
  padding: 30rpx 20rpx;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  text {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }
}
.submit {
  width: 500rpx;
  height: 84rpx;
  background: #1b91ff;
  box-shadow: 1px 2px 4px 0px rgba(204, 204, 204, 0.5);
  border-radius: 5px;
  text-align: center;
  line-height: 84rpx;
  font-size: 36rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  margin: 42rpx auto;
}
</style>
<style>
.lists >>> .select-picker {
  justify-content: flex-end;
}
</style>